<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,initial-scale=1.0"/>
    <title>首页</title>
    <link rel="stylesheet" href="css/mapIndex.css">
</head>
<body>

<!--地图区域-->
<div id="container">
    <div class="mapInIt">地图加载中...</div>
    <div id="warningBtn">告警</div>
    <div id="map_backBtn" class="map_back"><span>返回<br>总览</span></div>

    <!--告警通知列表-->
    <div id="warnList">
        <!--<div class="nothing">暂无告警通知</div>-->
        <ul>
            <li data-marker="987612878788">
                <div class="context">设备XXX发生了烟雾报警,设备XXX发生了烟雾报警,设备XXX发生了烟雾</div>
                <div class="time">2017-05-12 18:24:30</div>
                <div class="btnLis">
                    <button class="confirmWarn">确认报警</button>
                    <button class="cancelWarn">解除报警</button>
                </div>
            </li>
            <li data-marker="987612878788">
                <div class="context">设备XXX发生了烟雾报警,设备XXX发生了烟雾报警,设备XXX发生了烟雾</div>
                <div class="time">2017-05-12 18:24:30</div>
                <div class="btnLis">
                    <button class="confirmWarn">确认报警</button>
                    <button class="cancelWarn">解除报警</button>
                </div>
            </li>
            <li data-marker="987612878788">
                <div class="context">设备XXX发生了烟雾报警,设备XXX发生了烟雾报警,设备XXX发生了烟雾</div>
                <div class="time">2017-05-12 18:24:30</div>
                <div class="btnLis">
                    <button class="confirmWarn">确认报警</button>
                    <button class="cancelWarn">解除报警</button>
                </div>
            </li>
            <li data-marker="987612878788">
                <div class="context">设备XXX发生了烟雾报警,设备XXX发生了烟雾报警,设备XXX发生了烟雾</div>
                <div class="time">2017-05-12 18:24:30</div>
                <div class="btnLis">
                    <button class="confirmWarn">确认报警</button>
                    <button class="cancelWarn">解除报警</button>
                </div>
            </li>
            <li data-marker="987612878788">
                <div class="context">设备XXX发生了烟雾报警,设备XXX发生了烟雾报警,设备XXX发生了烟雾</div>
                <div class="time">2017-05-12 18:24:30</div>
                <div class="btnLis">
                    <button class="confirmWarn">确认报警</button>
                    <button class="cancelWarn">解除报警</button>
                </div>
            </li>
            <li data-marker="987612878788">
                <div class="context">设备XXX发生了烟雾报警,设备XXX发生了烟雾报警,设备XXX发生了烟雾</div>
                <div class="time">2017-05-12 18:24:30</div>
                <div class="btnLis">
                    <button class="confirmWarn">确认报警</button>
                    <button class="cancelWarn">解除报警</button>
                </div>
            </li>
            <li data-marker="987612878788">
                <div class="context">设备XXX发生了烟雾报警,设备XXX发生了烟雾报警,设备XXX发生了烟雾</div>
                <div class="time">2017-05-12 18:24:30</div>
                <div class="btnLis">
                    <button class="confirmWarn">确认报警</button>
                    <button class="cancelWarn">解除报警</button>
                </div>
            </li>
            <li data-marker="987612878788">
                <div class="context">设备XXX发生了烟雾报警,设备XXX发生了烟雾报警,设备XXX发生了烟雾</div>
                <div class="time">2017-05-12 18:24:30</div>
                <div class="btnLis">
                    <button class="confirmWarn">确认报警</button>
                    <button class="cancelWarn">解除报警</button>
                </div>
            </li>
            <li data-marker="987612878788">
                <div class="context">设备XXX发生了烟雾报警,设备XXX发生了烟雾报警,设备XXX发生了烟雾</div>
                <div class="time">2017-05-12 18:24:30</div>
                <div class="btnLis">
                    <button class="confirmWarn">确认报警</button>
                    <button class="cancelWarn">解除报警</button>
                </div>
            </li>
        </ul>
    </div>

</div>

<!--<table class="detailTable" border="1">-->
<!--<tr>-->
<!--<td>设备名称：</td>-->
<!--<td>value</td>-->
<!--<td>设备串号：</td>-->
<!--<td>value</td>-->
<!--</tr>-->
<!--<tr>-->
<!--<td>设备型号：</td>-->
<!--<td>value</td>-->
<!--<td>设备状态：</td>-->
<!--<td>value</td>-->
<!--</tr>-->
<!--<tr>-->
<!--<td>设备卡号：</td>-->
<!--<td>value</td>-->
<!--<td>上报频次：</td>-->
<!--<td>value</td>-->
<!--</tr>-->
<!--<tr>-->
<!--<td>设备电压：</td>-->
<!--<td>value</td>-->
<!--<td>信号强度：</td>-->
<!--<td>value</td>-->
<!--</tr>-->
<!--<tr>-->
<!--<td>绑定用户：</td>-->
<!--<td>value</td>-->
<!--<td>绑定手机：</td>-->
<!--<td>value</td>-->
<!--</tr>-->
<!--<tr>-->
<!--<td>安装时间：</td>-->
<!--<td>value</td>-->
<!--<td>最后一次上报时间：</td>-->
<!--<td>value</td>-->
<!--</tr>-->
<!--<tr>-->
<!--<td>安装详细地址：</td>-->
<!--<td colspan="3">value</td>-->
<!--</tr>-->
<!--<tr>-->
<!--<td>最后一次上报内容：</td>-->
<!--<td colspan="3">value</td>-->
<!--</tr>-->
<!--</table>-->

<script src="http://webapi.amap.com/maps?v=1.4.6&key=d09ab504ad2e0432b952109318e79dd2&plugin=AMap.MarkerClusterer,AMap.ControlBar&callback=mapInit"></script>
<script src="js/jquery.min.js"></script>
<script src="js/layer/layer.js"></script>
<script src="js/tool.js"></script>
<script type="text/javascript">
    var map, cluster, markers = [],
        dom_backBtn = document.getElementById('map_backBtn'),
        zoomMin = 3,
        zoomMax = 20,
        zoomNumber = 4,
        centerPoint = [108, 35];
    var markersObj = {}; //点对象集合
    window.mapInit = function () {
        map = new AMap.Map("container", { //初始化地图
            resizeEnable: true, //是否监控地图容器尺寸变化，默认值为false
            rotateEnable: true, //是否允许设置地图顺时针旋转角度
            pitchEnable: true, //是否允许设置俯仰角度，3D视图下为true，2D视图下无效。（自V1.4.0开始支持）
            viewMode: '3D', //开启3D视图,默认为关闭
            buildingAnimation: true, //楼块出现是否带动画
            expandZoomRange: true, //是否支持可以扩展最大缩放级别,和zooms属性配合使用，设置为true的时候，zooms的最大级别在PC上可以扩大到20级，移动端还是高清19/非高清20
            zooms: [zoomMin, zoomMax], //地图显示的缩放级别范围，在PC上，默认为[3,18]，取值范围[3-18]；在移动设备上，默认为[3,19],取值范围[3-19]
            zoom: zoomNumber, //地图显示的缩放级别，若center与level未赋值，地图初始化默认显示用户所在城市范围，3D地图下，zoom值，可以设置为浮点数。
            center: centerPoint //地图中心点
        });

        map.addControl(new AMap.ControlBar({
            showZoomBar: false,
            showControlButton: true,
            position: {
                right: '20px',
                top: '20px'
            }
        }));

        //TODO 获取所有点信息 测试数据
        var dataMap = [
            {
                "id": "987612878788",
                "org": "中国电信",
                "status": 1,
                "longlat": [
                    121.15,
                    31.89
                ]
            },
            {
                "id": "987612878788",
                "org": "中国电信",
                "status": 1,
                "longlat": [
                    109.781327,
                    39.608266
                ]
            },
            {
                "id": "987612878788",
                "org": "中国电信",
                "status": 1,
                "longlat": [
                    120.38,
                    37.35
                ]
            },
            {
                "id": "987612878788",
                "org": "中国电信",
                "status": 1,
                "longlat": [
                    122.207216,
                    29.985295
                ]
            },
            {
                "id": "987612878788",
                "org": "中国电信",
                "status": 1,
                "longlat": [
                    123.97,
                    47.33
                ]
            },
            {
                "id": "987612878788",
                "org": "中国电信",
                "status": 1,
                "longlat": [
                    120.13,
                    33.38
                ]
            },
            {
                "id": "987612878788",
                "org": "中国电信",
                "status": 1,
                "longlat": [
                    118.87,
                    42.28
                ]
            },
            {
                "id": "987612878788",
                "org": "中国电信",
                "status": 1,
                "longlat": [
                    120.33,
                    36.07
                ]
            },
            {
                "id": "987612878788",
                "org": "中国电信",
                "status": 1,
                "longlat": [
                    121.52,
                    36.89
                ]
            },
            {
                "id": "987612878788",
                "org": "中国电信",
                "status": 1,
                "longlat": [
                    102.188043,
                    38.520089
                ]
            },
            {
                "id": "987612878788",
                "org": "中国电信",
                "status": 1,
                "longlat": [
                    118.58,
                    24.93
                ]
            },
            {
                "id": "987612878788",
                "org": "中国电信",
                "status": 1,
                "longlat": [
                    121.05,
                    32.08
                ]
            },
            {
                "id": "987612878788",
                "org": "中国电信",
                "status": 1,
                "longlat": [
                    112.02,
                    22.93
                ]
            },
            {
                "id": "987612878788",
                "org": "中国电信",
                "status": 1,
                "longlat": [
                    121.48,
                    31.22
                ]
            },
            {
                "id": "987612878788",
                "org": "中国电信",
                "status": 1,
                "longlat": [
                    101.718637,
                    26.582347
                ]
            },
            {
                "id": "987612878788",
                "org": "中国电信",
                "status": 1,
                "longlat": [
                    117.93,
                    40.97
                ]
            },
            {
                "id": "987612878788",
                "org": "中国电信",
                "status": 1,
                "longlat": [
                    115.375279,
                    22.786211
                ]
            },
            {
                "id": "987612878788",
                "org": "中国电信",
                "status": 1,
                "longlat": [
                    124.37,
                    40.13
                ]
            },
            {
                "id": "987612878788",
                "org": "中国电信",
                "status": 1,
                "longlat": [
                    121.979603,
                    39.627114
                ]
            },
            {
                "id": "987612878788",
                "org": "中国电信",
                "status": 1,
                "longlat": [
                    109.47,
                    36.6
                ]
            },
            {
                "id": "987612878788",
                "org": "中国电信",
                "status": 1,
                "longlat": [
                    108.72,
                    34.36
                ]
            },
            {
                "id": "987612878788",
                "org": "中国电信",
                "status": 1,
                "longlat": [
                    115.89,
                    28.68
                ]
            },
            {
                "id": "987612878788",
                "org": "中国电信",
                "status": 1,
                "longlat": [
                    109.4,
                    24.33
                ]
            },
            {
                "id": "987612878788",
                "org": "中国电信",
                "status": 1,
                "longlat": [
                    109.511909,
                    18.252847
                ]
            },
            {
                "id": "987612878788",
                "org": "中国电信",
                "status": 1,
                "longlat": [
                    105.39,
                    28.91
                ]
            },
            {
                "id": "987612878788",
                "org": "中国电信",
                "status": 1,
                "longlat": [
                    120.5836,
                    31.2973
                ]
            },
            {
                "id": "987612878788",
                "org": "中国电信",
                "status": 1,
                "longlat": [
                    120.58395,
                    31.29755
                ]
            },
            {
                "id": "987612878788",
                "org": "中国电信",
                "status": 1,
                "longlat": [
                    120.58328,
                    31.2980
                ]
            },
            {
                "id": "952612878788",
                "org": "中国电信",
                "status": 1,
                "longlat": [
                    120.58228,
                    31.2980
                ]
            },
            {
                "id": "952712878788",
                "org": "中国电信",
                "status": 1,
                "longlat": [
                    120.58228,
                    31.2970
                ]
            },
            {
                "id": "952756878788",
                "org": "中国电信",
                "status": 1,
                "longlat": [
                    120.58238,
                    31.2970
                ]
            },
            {
                "id": "952756878788",
                "org": "中国电信",
                "status": 1,
                "longlat": [
                    120.58238,
                    31.2960
                ]
            },
            {
                "id": "95275687878895275",
                "org": "中国电信2",
                "status": 2,
                "longlat": [
                    120.58248,
                    31.2965
                ]
            }
        ];

        for (var i = 0; i < dataMap.length; i++) { //标记点
            var icon = 'icon3.png';
            switch (dataMap[i].status * 1) { //图标0灰色，1蓝色，2红色，3黄色
                case 0: //删除状态，不存在
                    icon = 'icon0.png';
                    break;
                case 1: //在线
                    icon = 'icon1.png';
                    break;
                case 2: //离线
                    icon = 'icon0.png';
                    break;
                case 3: //未知
                    icon = 'icon3.png';
                    break;
            }
            markers.push(new AMap.Marker({
                animation: "AMAP_ANIMATION_DROP",
                position: dataMap[i].longlat,
                icon: 'img/' + icon,
                extData: {
                    id: dataMap[i].id,
                    org: dataMap[i].org,
                    status: dataMap[i].status
                },
                map: map
            }));
        }

        var infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30)}); //信息窗口对象
        for (var i = 0; i < markers.length; i++) { //标记点的点击事件
            markersObj[dataMap[i].id] = markers[i];
            markers[i].on('click', function (o) {
                var thisMarker = o.target;
                var geoLonLat = thisMarker.getPosition();
                map.setZoomAndCenter(zoomMax, geoLonLat);
                var extData = thisMarker.getExtData();
                var id = extData.id;
                var left = 'left3.png';
                switch (extData.status * 1) { //图标0灰色，1蓝色，2红色，3黄色
                    case 0: //删除状态，不存在
                        left = 'left0';
                        break;
                    case 1: //在线
                        left = 'left1';
                        break;
                    case 2: //离线
                        left = 'left0';
                        break;
                    case 3: //未知
                        left = 'left3';
                    case 22: //告警
                        left = 'left2';
                        break;
                }
                var infoHtml = '<div data-infowin="' + id + '" class="' + left + '">'
                    + '<div style="padding: 5px 5px 5px 0;font-size: 12px;">设备串号：' + id + '</div>'
                    + '<div style="padding: 0 5px 0 0;font-size: 12px;">绑定用户：' + extData.org + '</div>'
                    + '<a href="javascript:openDetail(' + id + ');" style="padding: 5px 5px 5px 00;font-size: 12px;color: #0c60ee;cursor: pointer;">查看详情>></a>'
                    + '</div>';
                infoWindow.setContent(infoHtml);
                infoWindow.open(map, geoLonLat);
            });
        }
        dom_backBtn.addEventListener('click', function () {
            map.setZoomAndCenter(zoomNumber, centerPoint);
        });
        if (cluster) { //如果存在，则先清空
            cluster.setMap(null);
        }
        cluster = new AMap.MarkerClusterer(map, markers); //点聚合
        cluster.on('click', function () {
        });

        map.on('zoomchange', function () { //监听缩放事件，根据当前缩放等级，是否显示返回按钮
            var curZoom = map.getZoom();
            if (curZoom != zoomNumber) {
                dom_backBtn.style.display = "block";
            } else {
                dom_backBtn.style.display = "none";
            }
        });

    };

    var layer_warnList;

    function openWarnList() { //打开通知列表
        layer_warnList = layer.open({
            type: 1, //层的类型。0：信息框（默认），1：页面层，2：iframe层，3：加载层，4：tips层。
            title: ['告警通知', 'background-color:#869FD3;color:#FFFFFF;'], //控制默认标题栏。title:'标题'，自定义标题样式，可以title: ['标题', 'background:#c00;'] 第二个参数可书写任意css
            closeBtn: 1, //按钮风格 0,1,2
            area: ['300px', '98%'], //[宽度, 高度]
            offset: 'rb', //位置 rt右上
            shade: false, //控制遮罩[0.5, '#000']（[透明度0~1, '色值']）,设置为false则不显示
            shadeClose: true, //遮罩显示情况下，控制点击遮罩区域是否关闭层
            anim: 4, //动画类型0~6 默认0 设置false为不使用动画
            isOutAnim: false, //关闭时的动画，开启或关闭
            move: false, //禁止拖拽
            scrollbar: false, //屏蔽浏览器滚动条
            content: $('#warnList') //页面内容
        });
    }

    function openDetail(id) { //打开详情

        //todo ajax 获取详情 操作回调成功后，将数据拼接到以下html，再执行打开弹窗

        //todo 测试数据
        var obj = {
            deviceName: '测试设备',
            deviceId: '9283498459836',
            deviceType: 'NOCad',
            status: '在线',
            cardNumber: '15223324455',
            frequency: '30分钟',
            vol: '15v',
            rsrp: '强',
            user: '张三',
            mobile: '18323238787',
            install_time: '2018-04-24 12:09:34',
            last_report_time: '2018-05-10 12:09:34',
            address: '江苏省南京市玄武区XX大街XX号',
            last_report_msg: '设备正常'
        };

        var html = '<table class="detailTable" border="1">\n' +
            '    <tr>\n' +
            '        <td>设备名称：</td>\n' +
            '        <td>' + obj.deviceName + '</td>\n' +
            '        <td>设备串号：</td>\n' +
            '        <td>' + obj.deviceId + '</td>\n' +
            '    </tr>\n' +
            '    <tr>\n' +
            '        <td>设备型号：</td>\n' +
            '        <td>' + obj.deviceType + '</td>\n' +
            '        <td>设备状态：</td>\n' +
            '        <td>' + obj.status + '</td>\n' +
            '    </tr>\n' +
            '    <tr>\n' +
            '        <td>设备卡号：</td>\n' +
            '        <td>' + obj.cardNumber + '</td>\n' +
            '        <td>上报频次：</td>\n' +
            '        <td>' + obj.frequency + '</td>\n' +
            '    </tr>\n' +
            '    <tr>\n' +
            '        <td>设备电压：</td>\n' +
            '        <td>' + obj.vol + '</td>\n' +
            '        <td>信号强度：</td>\n' +
            '        <td>' + obj.rsrp + '</td>\n' +
            '    </tr>\n' +
            '    <tr>\n' +
            '        <td>绑定用户：</td>\n' +
            '        <td>' + obj.user + '</td>\n' +
            '        <td>绑定手机：</td>\n' +
            '        <td>' + obj.mobile + '</td>\n' +
            '    </tr>\n' +
            '    <tr>\n' +
            '        <td>安装时间：</td>\n' +
            '        <td>' + obj.install_time + '</td>\n' +
            '        <td>最后一次上报时间：</td>\n' +
            '        <td>' + obj.last_report_time + '</td>\n' +
            '    </tr>\n' +
            '    <tr>\n' +
            '        <td>安装详细地址：</td>\n' +
            '        <td colspan="3">' + obj.address + '</td>\n' +
            '    </tr>\n' +
            '    <tr>\n' +
            '        <td>最后一次上报内容：</td>\n' +
            '        <td colspan="3">' + obj.last_report_msg + '</td>\n' +
            '    </tr>\n' +
            '</table>';

        layer.open({
            type: 1, //层的类型。0：信息框（默认），1：页面层，2：iframe层，3：加载层，4：tips层。
            title: ['设备详情', 'background-color:#869FD3;color:#FFFFFF;'], //控制默认标题栏。title:'标题'，自定义标题样式，可以title: ['标题', 'background:#c00;'] 第二个参数可书写任意css
            closeBtn: 1, //按钮风格 0,1,2
            area: ['650px', 'auto'], //[宽度, 高度]
            shade: [0.5, '#000'], //控制遮罩[0.5, '#000']（[透明度0~1, '色值']）,设置为false则不显示
            shadeClose: true, //遮罩显示情况下，控制点击遮罩区域是否关闭层
            anim: false, //动画类型0~6 默认0 设置false为不使用动画
            isOutAnim: false, //关闭时的动画，开启或关闭
            scrollbar: false, //屏蔽浏览器滚动条
            content: html//页面内容
        });

    }


    /**
     * 移动地图到指定的点
     * @param id 设备串号
     */
    function setMapToMarker(id) {
        setWarnIcon(id);
        if (id && markersObj[id]) {
            map.setZoomAndCenter(zoomMax, markersObj[id].getPosition());
        }
    }

    /**
     * 设置告警图标
     * @param id 设备串号
     */
    function setWarnIcon(id) {
        if (id && markersObj[id]) {
            markersObj[id].setIcon("img/icon2.png"); //改变点的图标 图标0灰色，1蓝色，2红色，3黄色
            var extra = markersObj[id].getExtData();
            extra.status = 22; //改变弹窗的图标
            markersObj[id].setExtData(extra);
            var $infoWin = $("*[data-infowin='" + id + "']");
            if ($infoWin && $infoWin.length == 1) {
                $infoWin.attr('class', 'left2');
            }
        }
    }

    /**
     * 设置喜欢正常图标
     * @param id 设备串号
     */
    function setNormalIcon(id) {
        if (id && markersObj[id]) {
            markersObj[id].setIcon("img/icon1.png"); //改变点的图标 图标0灰色，1蓝色，2红色，3黄色
            var extra = markersObj[id].getExtData();
            extra.status = 1; //改变弹窗的图标
            markersObj[id].setExtData(extra);
            var $infoWin = $("*[data-infowin='" + id + "']");
            if ($infoWin && $infoWin.length == 1) {
                $infoWin.attr('class', 'left1');
            }
        }
    }

    /**
     * 获取告警信息
     */
    function getWarning() {
        //todo ajax 操作回调成功后，得到告警数组，刷新告警通知列表遍历设置告警图标

        //todo 测试数据
        var warnArr = [
            {
                id: '987612878788',
                confirm_status: 1,
                msg: '设备XXX发生了烟雾报警,设备XXX发生了烟雾报警,设备XXX发生了烟雾',
                time: '2017-05-12 18:24:30'
            },
            {
                id: '987612878788',
                confirm_status: 0,
                msg: '设备XXX发生了烟雾报警,设备XXX发生了烟雾报警,设备XXX发生了烟雾',
                time: '2017-05-12 18:24:30'
            },
            {
                id: '987612878788',
                confirm_status: 0,
                msg: '设备XXX发生了烟雾报警,设备XXX发生了烟雾报警,设备XXX发生了烟雾',
                time: '2017-05-12 18:24:30'
            },
            {
                id: '987612878788',
                confirm_status: 0,
                msg: '设备XXX发生了烟雾报警,设备XXX发生了烟雾报警,设备XXX发生了烟雾',
                time: '2017-05-12 18:24:30'
            }
        ];

        var html = '';
        if (warnArr && warnArr.length > 0) {
            $('#warningBtn').addClass('acting'); //按钮动画
            $.each(warnArr, function (index, item) {
                var id = item.id,
                    msg = item.msg,
                    time = item.time;
                setWarnIcon(id);

                var btn = item.confirm_status == 1 ? '<button class="disabled">已确认</button>' : '<button class="confirmWarn">确认报警</button>';

                html += '<li data-marker="' + id + '">\n' +
                    '                <div class="context">' + msg + '</div>\n' +
                    '                <div class="time">' + time + '</div>\n' +
                    '                <div class="btnLis">\n' +
                    btn +
                    '                    <button class="cancelWarn">解除报警</button>\n' +
                    '                </div>\n' +
                    '            </li>';
            });
        } else {
            $('#warningBtn').removeClass('acting'); //移除按钮动画
            html = '<div class="nothing">暂无告警通知</div>';
        }
        $('#warnList ul').html(html);
    }

    $(function () {

        getWarning();//获取告警信息
        setInterval(getWarning, 1000 * 10); //轮询

        //点击打开告警列表
        $(document).on('click', '#warningBtn', function () {
            if ($("#warnList").css("display") != 'none') {
                layer.close(layer_warnList);
            } else {
                openWarnList();
            }
        });

        //点击告警信息
        $(document).on('click', '#warnList .context', function (e) {
            var $this = $(e.target),
                $li = $this.parents('li'),
                id = $li.data('marker');
            setMapToMarker(id); //移动地图到所在位置
        });

        //点击确认告警
        $(document).on('click', '#warnList .confirmWarn', function (e) {
            var $this = $(e.target),
                $li = $this.parents('li'),
                id = $li.data('marker');

            //todo ajax 确认告警 操作回调成功后执行以下

            setNormalIcon(id); //设置告警图标正常

            $li.fadeTo("slow", 0.01, function () { //删除本条 动画效果
                $(this).slideUp("slow", function () {
                    $(this).remove();
                });
            });

        });

        //点击解除警告
        $(document).on('click', '#warnList .cancelWarn', function (e) {
            var $this = $(e.target),
                $li = $this.parents('li'),
                id = $li.data('marker');

            //todo ajax 解除告警 操作回调成功后执行以下

            setNormalIcon(id); //设置告警图标正常

            $li.fadeTo("slow", 0.01, function () { //删除本条 动画效果
                $(this).slideUp("slow", function () {
                    $(this).remove();
                });
            });

        });

    });

</script>
</body>
</html>